<template>
  <div class="mymenu">
    <!-- $route.path 当前路径  ，index 里面写 对应页面的路径 -->
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="sidebar.opened"
    >
      <router-link to="/">
        <el-menu-item index="/home">
          <i class="iconfont icon-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
      </router-link>
      <router-link to="/super" v-if="roleid == 1">
        <el-menu-item index="/super">
          <i class="iconfont icon-home"></i>
          <span slot="title">超级管理员</span>
        </el-menu-item>
      </router-link>
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-shangpin-tianchong"></i>
          <span>商品</span>
        </template>
        <el-menu-item-group>
          <router-link to="/pms/product">
            <el-menu-item index="/pms/product">
              <span class="iconfont icon-liebiao1"></span>
              商品列表</el-menu-item
            >
          </router-link>
          <router-link to="/pms/productadd">
            <el-menu-item index="/pms/productadd">
              <span class="iconfont icon-tianjia"></span>
              添加商品
            </el-menu-item>
          </router-link>
          <router-link to="/pms/productCate">
            <el-menu-item index="/pms/productCate">
              <span class="iconfont icon-fenlei1"></span>
              商品分类</el-menu-item
            >
          </router-link>
          <router-link to="/pms/productAttr">
            <el-menu-item index="/pms/productAttr">
              <span class="iconfont icon-fenlei"></span>
              商品类型</el-menu-item
            >
          </router-link>
          <router-link to="/pms/brand">
            <el-menu-item index="/pms/brand">
              <span class="iconfont icon-pinpaitemai"></span>
              品牌管理</el-menu-item
            >
          </router-link>
        </el-menu-item-group>
      </el-submenu>

      
      



    </el-menu>
  </div>
</template>

<script>
//左侧菜单可以写成 循环的形式；this.$router
import { mapGetters } from "vuex";
export default {
  name: "sidebar",
  methods: {
    handleOpen() {
      console.log("打开菜单");
    },
    handleClose() {
      console.log("关闭菜单");
    },
  },
  computed: {
    ...mapGetters(["sidebar", "roleid"]),
  },
};
</script>

<style scoped lang="scss">
.mymenu {
  .el-menu {
    border-right: none;
  }
}
</style>
